<template>
  <div class="coupon-info" v-if="cardData.id">
    <!-- <div class="title">卡券信息</div> -->
    <van-field
      label="激活人姓名"
      :placeholder="cardData.activation_name"
      input-align="right"
      readonly
      custom-style="padding:30rpx 0;border:none"
    />
    <van-field
      label="激活人身份证"
      :placeholder="cardData.activation_identity_card | stringCode"
      input-align="right"
      readonly
      custom-style="padding:30rpx 0"
    />
    <van-field
      label="可使用日期"
      :placeholder="`${cardData.start_time_name}至${cardData.end_time_name}`"
      input-align="right"
      readonly
      custom-style="padding:30rpx 0"
    />
    <van-field
      label="总共次数"
      :placeholder="`${cardData.total_number}次`"
      input-align="right"
      readonly
      custom-style="padding:30rpx 0"
    />
    <van-field
      label="可入园人数"
      :placeholder="`${cardData.people_number}人`"
      input-align="right"
      readonly
      custom-style="padding:30rpx 0"
    />

    <div class="img-box">
      <template v-for="(item, index) in cardData.media">
        <img :src="item.url" class="photo-img" :key="index" />
      </template>
    </div>
    <div class="title">使用范围</div>
    <div class="list-box">
      <div
        class="info-box"
        @click="toLink(item.id)"
        v-for="(item, index) in cardData.apply_list"
        :key="index"
      >
        <div class="left">
          <img mode="scaleToFill" :src="item.logo" class="img-size-100" />
        </div>
        <div class="right">
          <div class="title">{{ item.name }}</div>
          <div class="subtitle">{{ item.address }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { cardData: "" };
  },
  filters: {
    stringCode(str) {
      if (!str) return;
      return str.substring(0, 6) + "********" + str.substring(14);
    },
  },
  onLoad(options) {
    this.getCardInfo(options.id);
  },
  methods: {
    toLink(id) {
      uni.navigateTo({
        url: `/pages/shanghu/details?id=${id}`,
      });
    },
    getCardInfo(card_id) {
      this.$api.getCardInfo({ card_id: card_id, card_merch: 1 }).then((res) => {
        if (res.code == 200) {
          this.cardData = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.coupon-info {
  padding: 30rpx;
  box-sizing: border-box;
  .van-cell {
    &::after {
      left: 0;
    }
  }
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  .img-box {
    display: flex;
    margin: 40rpx 0 20rpx;
    flex-wrap: wrap;
    .photo-img {
      flex: 0 0 200rpx;
      height: 200rpx;
      background: #dedede;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
  .list-box {
    margin-top: 40rpx;
    .info-box {
      display: flex;
      margin-bottom: 48rpx;
      background: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png) no-repeat right center;
      background-size: 30rpx 35rpx;
      .left {
        flex: 0 0 84rpx;
        height: 82rpx;
        border-radius: 4rpx;
        overflow: hidden;
      }
      .right {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        .title {
          font-size: 32rpx;
        }
        .subtitle {
          font-size: 24rpx;
          color: #666;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>
